<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let form=ref({
  username:"",
  password:"",
  id:"",
}

)
const onSubmit=()=>{
  axios.post(`http://127.0.0.1:8000/app/staff/login_user/`,form.value)
  .then(res=>{
    console.log(res)
    if (res.data.code == 400){
      ElMessage.error("用户名不能为空")
    }
    if(res.data.code == 401){
      ElMessage.error("密码不能为空")
    }
    if(res.data.code == 402){
      ElMessage.error("用户名或密码错误")
    }
    if (res.data.code == 200){
      ElMessage.success("登录成功")
      localStorage.setItem('jwt_token', res.data.token);
      localStorage.setItem("menulist",JSON.stringify(res.data.menulist))
      localStorage.setItem("userid",JSON.stringify(res.data.data1))
      localStorage.setItem("roleid",JSON.stringify(res.data.data2))
      router.push("/firsthome")
    }
  })
  .catch(err=>{
    ElMessage.error("登录失败")
  })

}
</script>

<template>

<div style="width: 100%;height: 100vh;background-color: #f2f3f5;position: relative;">
  <div>
    <img src="../../assets/2.jpg" style="width: 500px;height: 550px;margin-left: 300px;margin-top: 100px;">
  </div>
  <div style="background-color: white;height:450px;width: 400px;position: absolute;top: 100px;left: 800px;padding: 50px;">
    <img src="../../assets/1.jpg"  style="width: 200px; height: 130px;margin-left: 100px;">
    <div style="margin-left: 130px;font-size: 30px;">欢&nbsp;迎&nbsp;登&nbsp;录</div>
    <div style="margin-left: 50px;margin-top: 30px;">
      <el-form-item label="用户名" >
        <el-input v-model="form.username"  style="width: 240px;"/>
      </el-form-item>
      <el-form-item label="密  码" style="margin-left: 10px;">
        <el-input  type="password" v-model="form.password" style="width: 240px;" show-password/>
      </el-form-item>
    </div>
    <div style="font-size: 13px;margin-left: 80px;margin-top: 20px;">
      <el-checkbox value="Online activities" name="type">
        我已阅读并同意《用户隐私政策》
        </el-checkbox>
      </div>
    <button @click="onSubmit" style="width: 335px;height: 44px; border-radius: 8px;font-size: 16px; border: none;color: black;margin-top: 50px;margin-left: 40px;">登录</button>
  </div>
</div>
</template>

<style scoped>
.quan{
 width: 100%;
 height: 100vh;
}

</style>
